<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>heatmap.js | Showcases</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index, follow">
    <meta name="description" content="A maintained list of projects using heatmap.js">
    <meta name="keywords" content="heatmap.js showcases, heatmap.js in the wild">
    <meta name="author" content="Patrick Wied">
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="index.html">heatmap.js</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="index.html">Home</a></li>
              <li><a href="examples.html" title="heatmap.js examples">Examples</a></li>
              <li  class="active"><a href="showcases.html" title="Real World Usage of heatmap.js">Showcases</a></li>
              <li><a href="https://github.com/pa7/heatmap.js/blob/master/README.md" target="_blank" title="Documentation on Github">Documentation</a></li>
              <li><a href="contact.html" title="Contact for Support &amp; Feedback">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
        <div class="page-header">
            <h1>
            Showcases
            <small>Real world usage of heatmap.js</small>
            </h1>
        </div>
        <div class="alert alert-info">
            Did you build an awesome project using heatmap.js?<br /> <strong><a href="contact.html">Please let me know about it!</a></strong> If you send me a screenshot and a short description about your project I can add you to the list.        
        </div>
        <ul class="thumbnails">
            <li class="span4">
                <div class="thumbnail">
                    <img src="showcases/heatmap-keyboard.jpg" alt="Heatmap Keyboard by Patrick Wied">
                    <div class="caption">
                    <h4>Heatmap Keyboard</h4>
                    <p>Realtime Keyboard Heatmap showing the character distribution of texts<br /><br />Author: Patrick Wied</p>
                        <a class="btn next" href="http://www.patrick-wied.at/projects/heatmap-keyboard/" target="_blank">Visit project</a>
                    </div>
                </div>
            </li>

            <li class="span4">
                <div class="thumbnail">
                    <img src="showcases/a-day-in-the-life.jpg" alt="a day in the life by Alastair Coote">
                    <div class="caption">
                    <h4>A day in the life</h4>
                    <p>A fullscreen leaflet heatmap layer animation of a day in the life of the New York Times<br />
                        <br />Author: Alastair Coote</p>
                        <a class="btn" href="http://heatmapdemo.alastair.is/" target="_blank">Visit project</a>
                    </div>
                </div>
            </li>
            <li class="span4">
                <div class="thumbnail">
                    <img src="showcases/nearbynow.jpg" alt="Nearby Now">
                    <div class="caption">
                    <h4>Nearby Now</h4>
                    <p>Gmaps heatmap layer to show realtime data of services provided around you<br />
                        <br />Author: Barry Harkness</p>
                        <a class="btn" href="http://www.nearbynow.co/profile/electrician/electramedics" target="_blank">Visit project</a>
                    </div>
                </div>
            </li>
            <li class="span4">
                <div class="thumbnail">
                    <img src="showcases/social-club-rockstar.jpg" alt="Social Club Game Statistics by Rockstar Games">
                    <div class="caption">
                    <h4>Social Club Match Statistics</h4>
                    <p>A heatmap overlay for Max Payne 3 game maps to indicate flashpoints and bottlenecks. <br />
                        <br />Author: Rockstar Games</p>
                        <a class="btn" href="http://www.rockstargames.com/newswire/article/46291/new-at-social-club-multiplayer-match-reports.html" target="_blank">Visit project</a>
                    </div>
                </div>
            </li>
            <li class="span4">
                <div class="thumbnail">
                    <img src="showcases/triposo-stpaddy.jpg" alt="Green World St Patricks day heatmap">
                    <div class="caption">
                    <h4>Green World</h4>
                    <p>A mostly green heatmap showing the distribution of Irish pubs in the world.<br />
                        <br />Autor: Triposo</p>
                        <a class="btn" href="http://blog.triposo.com/2013/03/green-world.html" target="_blank">Visit project</a>
                    </div>
                </div>
            </li>
            <li class="span4">
                <div class="thumbnail">
                    <img src="showcases/dui-finland-2012.jpg" alt="Driving under Influence Finland 2012">
                    <div class="caption">
                    <h4>Driving under Influence Stats FI</h4>
                    <p>A heatmap overlay visualizing driving under influence incidents in Finland 2012<br />
                        <br />Author: Jarno Martilla</p>
                        <a class="btn" href="http://utveckling.ylebloggen.fi/2013/03/21/dui-heatmap-finland-2012/" target="_blank">Visit project</a>
                    </div>
                </div>
            </li>
            <li class="span4">
                <div class="thumbnail">
                    <img src="showcases/goodmorning-fu.jpg" alt="Good Morning Fu">
                    <div class="caption">
                    <h4>Good Morning &amp; FU Twitter Map</h4>
                    <p>Density heatmap that shows the frequency of Twitter keywords over time<br />
                        <br /><br /></p>
                        <a class="btn" href="http://www.huffingtonpost.com/2012/08/20/twitter-heatmap-good-morning-fck-you_n_1811065.html" target="_blank">Visit project</a>
                    </div>
                </div>
            </li>
        </ul>
      <hr>
      <footer>
        <p style="width:330px;margin:auto;">heatmap.js by <a href="http://www.patrick-wied.at/" title="patrick wied javascript developer" target="_blank">Patrick Wied</a> (<a href="http://twitter.com/patrickwied" target="_blank">@patrickwied</a>) 2011-2013</p>
      </footer>
<a href="https://github.com/pa7/heatmap.js" target="_blank"><img style="position: fixed; top: 0; left: 0; border: 0;z-index:10000" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>
    </div> <!-- /container -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

    <!-- Remove this from your site, it's my analytics script !-->
    <script type="text/javascript">
      var pkBaseURL = (("https:" == document.location.protocol) ? "https://www.patrick-wied.at/helper/piwik/" : "http://www.patrick-wied.at/helper/piwik/");
      document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
      </script><script type="text/javascript">
      try {
      var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
      piwikTracker.trackPageView();
      piwikTracker.enableLinkTracking();
      } catch( err ) {}
    </script><noscript><p><img src="http://www.patrick-wied.at/helper/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
    <!-- End of Analytics Script -->
  </body>
</html>
